<template>
  <div class="resume-container-demain demand-info-box">
    <HPModuleTitle titleText="需求详情" :showIcon="false" :showMarBottom="true">
      <slot name="back"></slot>
    </HPModuleTitle>
    <el-row :class="['info-box', isShowInterviewBox ? '' : 'not-bor']">
      <el-col :span="24" :class="'info-box-title'">
        <span></span>
        <span>需求信息</span>
      </el-col>
      <el-col :span="12" :class="'info-item'">
        <span class="info-item-tip"> 需求单号 </span>
        <span class="sign">:</span>
        <span class="info-item-txt">
          {{ textDatas.needsCode }}
        </span>
      </el-col>
      <el-col :span="12" :class="'info-item'">
        <span class="info-item-tip"> 一级部门 </span>
        <span class="sign">:</span>
        <span class="info-item-txt">
          {{ textDatas.paths1 }}
        </span>
      </el-col>
      <el-col :span="12" :class="'info-item'">
        <span class="info-item-tip"> 二级部门 </span>
        <span class="sign">:</span>
        <span class="info-item-txt">
          {{ textDatas.paths2 }}
        </span>
      </el-col>
      <el-col :span="12" :class="'info-item'">
        <span class="info-item-tip"> 三级部门 </span>
        <span class="sign">:</span>
        <span class="info-item-txt">
          {{ textDatas.paths3 }}
        </span>
      </el-col>
      <el-col :span="12" :class="'info-item'">
        <span class="info-item-tip"> 四级部门 </span>
        <span class="sign">:</span>
        <span class="info-item-txt">
          {{ textDatas.paths4 }}
        </span>
      </el-col>
      <el-col :span="12" :class="'info-item'">
        <span class="info-item-tip"> 五级部门 </span>
        <span class="sign">:</span>
        <span class="info-item-txt">
          {{ textDatas.paths5 }}
        </span>
      </el-col>
      <el-col :span="12" :class="'info-item'">
        <span class="info-item-tip"> 需求数量 </span>
        <span class="sign">:</span>
        <span class="info-item-txt">
          {{ textDatas.needsNumber }}
        </span>
      </el-col>
      <el-col :span="12" :class="'info-item'">
        <span class="info-item-tip"> 外包人员汇报对象 </span>
        <span class="sign">:</span>
        <span class="info-item-txt">
          {{ textDatas.employeeName }}
        </span>
      </el-col>
      <el-col :span="12" :class="'info-item'">
        <span class="info-item-tip"> 期望入场日期 </span>
        <span class="sign">:</span>
        <span class="info-item-txt">
          {{ textDatas.beginTime }}
        </span>
      </el-col>
    </el-row>
    <el-row :class="['info-box', isShowInterviewBox ? '' : 'not-bor']">
      <el-col :span="24" :class="'info-box-title'">
        <span></span>
        <span>基本要求</span>
      </el-col>
      <el-col :span="12" :class="'info-item'">
        <span class="info-item-tip"> 系列名称 </span>
        <span class="sign">:</span>
        <span class="info-item-txt">
          {{ textDatas.arrayName }}
        </span>
      </el-col>
      <el-col :span="12" :class="'info-item'">
        <span class="info-item-tip"> 岗位名称 </span>
        <span class="sign">:</span>
        <span class="info-item-txt">
          {{ textDatas.positionName }}
        </span>
      </el-col>
      <el-col :span="12" :class="'info-item'">
        <span class="info-item-tip"> 岗位级别 </span>
        <span class="sign">:</span>
        <span class="info-item-txt">
          {{ textDatas.rankLevelName }}
        </span>
      </el-col>
      <el-col :span="12" :class="'info-item'">
        <span class="info-item-tip"> 岗位报价 </span>
        <span class="sign">:</span>
        <span class="info-item-txt">
          {{ textDatas.positionPrice }}
        </span>
      </el-col>
      <el-col :span="12" :class="'info-item'">
        <span class="info-item-tip"> 工作年限 </span>
        <span class="sign">:</span>
        <span class="info-item-txt">
          {{ textDatas.workLife }}
        </span>
      </el-col>
      <el-col :span="12" :class="'info-item'">
        <span class="info-item-tip"> 工作城市 </span>
        <span class="sign">:</span>
        <span class="info-item-txt">
          {{ textDatas.workingCity }}
        </span>
      </el-col>

      <el-col :span="12" :class="'info-item'">
        <span class="info-item-tip"> 工作地点 </span>
        <span class="sign">:</span>
        <span class="info-item-txt">
          {{ textDatas.workingPlace }}
        </span>
      </el-col>
      <el-col :span="12" :class="'info-item'">
        <span class="info-item-tip"> 考勤工时制 </span>
        <span class="sign">:</span>
        <span class="info-item-txt">
          {{ textDatas.workTimeTypeValue }}
        </span>
      </el-col>
    </el-row>
    <el-row :class="['info-box', isShowInterviewBox ? '' : 'not-bor']">
      <el-col :span="24" :class="'info-box-title'">
        <span></span>
        <span>岗位说明</span>
      </el-col>
      <el-row :class="'info-item-tip info-block-tip-box no-require'">
        <el-col :span="24">
          <span
            v-for="(txt, index) in textDatas.positionInformation"
            :key="index"
            :class="'block-tip-txt'"
            >{{ txt }}</span
          >
        </el-col>
      </el-row>
    </el-row>
    <el-row :class="['info-box', isShowInterviewBox ? '' : 'not-bor']">
      <el-row :class="'info-box-title'">
        <span></span>
        <span>任职要求</span>
      </el-row>
      <el-row :class="'info-item-tip info-block-tip-box no-require'">
        <el-col :span="24">
          <span
            v-for="(txt, index) in textDatas.requirements"
            :key="index"
            :class="'block-tip-txt'"
            >{{ txt }}</span
          >
        </el-col>
      </el-row>
    </el-row>
    <span
      class="iconfont icon-yiguanbi bg-close-icon"
      v-if="textDatas.isCloseDetail"
    ></span>
    <div class="demand-btn-box" v-if="textDatas.isShowGetDemandedBtn && $route.query.suspendState != 1">
      <el-button
        :class="'btn save-md-btn'"
        :disabled="isDisableGetDemand"
        v-loading.fullscreen.lock="fullscreenLoading"
        @click="takeOverDemandInfo"
        >接收</el-button
      >
      <el-button :class="'btn cancle-md-btn'" @click="cancleTakeOverDemand"
        >取消</el-button
      >
    </div>
  </div>
</template>
<script>
import HPModuleTitle from "./HPModuleTitle";
function takeOverDemand(store, opts) {
  return store.dispatch("TAKE_OVER_DEMAND", opts);
}
export default {
  props: {
    textDatas: {
      type: Object,
      default: [],
    },
    isShowInterviewBox: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      isDisableGetDemand: false,
      isShowGetDemanded: false,
      isShowGetDemandedBtn: true,
      needId: "",
      fullscreenLoading: false,
    };
  },
  components: {
    HPModuleTitle,
  },
  methods: {
    takeOverDemandInfo() {
      let self = this;
      this.needId = this.textDatas.needsId;
      this.isDisableGetDemand = true;
      if (!this.needId) {
        this._showMessage("error", "需求ID不能为空!");
        return;
      }
      this.fullscreenLoading = true;
      takeOverDemand(self.$store, { needId: self.needId }).then(() => {
        let tempObj = self.$store.getters.getTakeDemandedInfo;
        this.fullscreenLoading = false;
        if (tempObj.state === "0000") {
          // 接收成功！
          self._showMessage("success", tempObj.message);
          this.cancleTakeOverDemand();
        } else {
          // 接收失败
          this.isDisableGetDemand = false;
          this._showMessage("error", tempObj.message);
        }
      });
    },
    cancleTakeOverDemand() {
      this.$router.push("/getdemand");
    },
    _showMessage(type, msg, fn) {
      this.$message({
        showClose: false,
        message: msg,
        type: type,
        duration: 1500,
        onClose: function () {
          if (fn instanceof Function) {
            fn();
          }
        },
      });
    },
  },
};
</script>
<style lang="scss">
@import "~@/assets/scss/bilibili-theme.scss";
.demand-info-box {
  position: relative;
  .demand-module-title {
    height: 40px;
    line-height: 40px;
    text-align: left;
    border-bottom: 1px solid #ededed;
    background-color: #fafafa;
    text-indent: 20px;
    font-size: 14px;
    font-weight: bold;
    color: #3a3a3a;
  }
  .sub-module-demand-title {
    height: 48px;
    border-bottom: 2px solid #f1f1f1;
    line-height: 48px;
    text-align: left;
    color: #636363;
    font-weight: 600;
    font-size: 14px;
    width: 96%;
    margin-left: 20px;
  }
  .info-box {
    width: 100%;
    padding-bottom: 20px;
    padding-top: 0px;
    padding-left: 20px;
    padding-right: 20px;
    border: 1px solid #ededed;
    margin-bottom: 20px;
    border-radius: 3px;
    .info-box-title {
      height: 40px;
      line-height: 40px;
      color: $main-color;
      font-weight: bolder;
      font-size: 14px;
      text-align: left;
      span:nth-child(1) {
        width: 4px;
        height: 16px;
        float: left;
        margin-top: 12px;
        margin-right: 10px;
        background: $main-color;
      }
    }
    .info-item {
      display: inline-block;
      font-size: 14px;
      color: #636363;
      text-align: left;
    }
    .info-item-tip {
      width: 130px;
      height: 40px;
      line-height: 40px;
      text-align: left;
      text-indent: 14px;
      float: left;
      font-size: 14px;
      position: relative;
      &::before {
        content: "*";
        color: red;
        position: absolute;
        top: 3px;
        left: -10px;
      }
    }
    .no-require {
      &::before {
        display: none;
      }
    }
    .info-block-tip-box {
      width: 100%;
      height: auto;
      line-height: 22px;
      .block-tip-txt {
        display: block;
        padding-top: 5px;
        padding-bottom: 5px;
      }
    }
    .sign {
      float: left;
      height: 40px;
      width: 10px;
      line-height: 40px;
    }
    .info-item-txt {
      float: left;
      height: 40px;
      line-height: 40px;
      font-size: 14px;
    }
    .job-ex-item {
      display: block;
      padding-top: 10px;
    }

    .info-block-item {
      width: 100%;
      .info-item-tip {
        float: left;
      }
      .item-box {
        padding-top: 10px;
        display: inline-block;
      }
      .info-item-txt {
        display: inline-block;
        font-size: 14px;
        height: auto;
        line-height: 22px;
        width: 80%;
      }
      .job-gz {
        width: 80%;
      }
    }
  }
  .bg-close-icon {
    font-size: 102px;
    position: absolute;
    top: 50px;
    right: 0px;
    color: #c1c0c0;
  }
}
</style>
